<template>
  <div class="indexPage"  ref="indexPageRef" :class="{ 'full-screen': isFullScreen }">
  <div class="page flex-col"   >
    <div class="box_1 flex-col"  >
      <BaiduMap />
    </div>
    <div class="box_2 flex-col">
      <div class="group_1 flex-row"  style="z-index: 100;">
        <div class="group_2 flex-col">
          <div class="group_3 flex-col"  @click="toggleFullScreen">
             <div class="text-wrapper_1 flex-col"><span class="text_1">{{ isFullScreen ? '退出全屏' : '全屏' }}</span></div>
          </div>
        </div>
        <div class="image-wrapper_19 flex-col justify-between">
          <img
            class="image_2"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPngd10294c00afdeff9a29dbaef691a84debc1f3dc59b236c15078defd159f4160b.png"
          />
          <img
            class="image_3"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPngc37bac85bb5e55618bfd98cceefb901c72dd3256148401ba73fb490f8bb4511d.png"
          />
        </div>
        <div class="image-wrapper_20 flex-col justify-between">
          <img
            class="image_4"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng88699ed258240c4a686ccb54ec34fd11fc954a5d1769feebd55e84d926a2993e.png"
          />
          <img
            class="image_5"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng3db6f4f4654d810cb5f7b3aee5f49b066592453e2fd8f916500c427b8495956d.png"
          />
        </div>
        <div class="group_4 flex-col"  @click="navigateToNotificationList">
          <div class="section_1 flex-col">
            <div class="text-wrapper_2 flex-col"><span class="text_2">消息通知</span></div>
          </div>
        </div>
        <div class="image-wrapper_4 flex-row">
          <img
            class="image_6"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng5adb52a12365d56e5cd9b10d0f88718225b743d7c13e98c0f41e3f48a5941984.png"
          />
          <img
            class="image_7"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng72ba8172f56beb89cbf2ed2f6757be8b0642e8d997f220409c22041cdc8921e3.png"
          />
          <img
            class="image_8"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPng1d235ed5e0c2b493d8dc0bc7e9483862d054a74dd6b2fea673662f293b5d8c52.png"
          />
          <img
            class="image_9"
            referrerpolicy="no-referrer"
            src="./assets/img/SketchPngb90eb238c82de3f8258af184fadcaaecbf4e15ed512388878145fff033eb69f1.png"
          />
        </div>
        <div class="text-wrapper_3 flex-col"><span class="text_3">哈密市多维消防物联网平台</span></div>
      </div>
      <div class="box_38 flex-row" >
        <div class="group_33 flex-col justify-between"  style="z-index: 100;">
          <div class="block_21 flex-col">
            <div class="box_27 flex-col">
              <img
                class="image_23"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPng5903af00ab594d1193870d632cd5f72974e971806406357cabe5ffe306b07672.png"
              />
              <div class="block_22 flex-row">
                <img
                  class="label_1"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPng7299da11c554e71dd6ad26e19373440ff4e84c3d540c676b6eed7065e8a07156.png"
                />
                <span class="text_4" @click="jumpInsepction" >巡检任务</span>
                <img
                    class="image_22"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                    style="width: 0.5rem;height: 0.7rem;margin-left: 3.8rem;"
                    @click="jumpNotice('巡检任务通知')"
                  />
                <div class="text-wrapper_32 flex-col"
                @click="inspectionSelection('today')"
                :style="{ backgroundColor: isInspection == 'today' ? 'rgba(25, 224, 198, 0.2)' : 'rgba(25, 224, 198, 0.1)' }"
                style="margin-left: 0.2rem;"
                >
                <span class="text_95" >当天</span>
                </div>
                <div class="box_29 flex-row"
                @click="inspectionSelection('recent90');"
                :style="{ backgroundColor: isInspection == 'recent90' ? 'rgba(25, 224, 198, 0.2)' : 'rgba(25, 224, 198, 0.1)' }"
                >
                  <span class="text_96">近90日</span>
                  <img
                    class="image_25"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng1ba6d6d38d449acb233406ed73549950e10c5985e2027a7257277263ef4f958a.png"
                  />
                </div>
              </div>
            </div>
            <div class="section_17 flex-row">
              <div class="text-group_80 flex-col justify-between">
                <span class="text_5">{{dailyInspectionData.total_count}}</span>
                <span class="text_6" @click="handleOpenInspectionModal('全部')">任务总数</span>
              </div>
              <div class="block_2 flex-col"></div>
              <div class="text-group_81 flex-col justify-between">
                <span class="text_7">{{ dailyInspectionData.completed_count }}</span>
                <span class="text_8" @click="handleOpenInspectionModal('已完成')">已完成</span>
              </div>
              <div class="text-wrapper_33 flex-col justify-between">
                <span class="text_9">{{ dailyInspectionData.uncompleted_count }}</span>
                <span class="text_10" @click="handleOpenInspectionModal('未完成')">超期未完成</span>
              </div>
              <div class="text-group_82 flex-col justify-between">
                <span class="text_11">{{ dailyInspectionData.wait_completed_count}}</span>
                <span class="text_12" @click="handleOpenInspectionModal('待完成')">待完成</span>
              </div>
            </div>
          </div>
          <div class="block_3 flex-col">
            <div class="box_39 flex-row">
              <div class="image-text_61 flex-row justify-between">
                <img
                  class="label_2"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPng92e45e5546332daf3a3990dac2bc3998a389ca1bb0db01218af75ddf3999c81b.png"
                />
                <span class="text-group_4" @click="jumpSafeAlarm" >视频告警</span>
                <img
                    class="image_22"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                    style="width: 0.5rem;height: 0.7rem;margin-left: 6.3rem;"
                    @click="jumpNotice('安全告警通知')"
                  />
              </div>
            </div>
            <div class="box_40 flex-row">
              <img
                class="label_3"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPngc5ae881a16e5b2f3eb25133b80b4f75c2a7009ea79dcd012462853a95aa7af67.png"
              />
              <div class="text-group_83 flex-col justify-between">
                <span class="text_13" @click="handleOpenVideoModal('全部')">告警总数</span>
                <span class="text_14">{{alarmStatistics.alarmTotal}}</span>
              </div>
              <img
                class="label_4"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPngebb7968bfeb971a58f478f9aa287174621f2cfe4aed55d74b7de4d6279be51b1.png"
              />
              <div class="text-group_84 flex-col justify-between">
                <span class="text_15" @click="handleOpenVideoModal('未处置')">未处置</span>
                <span class="text_16">{{alarmStatistics.notDisposed}}</span>
              </div>
              <img
                class="label_5"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPngb7804b526df725fc026a8d856d11774687592cccf656d160bb23b1ce81a5645b.png"
              />
              <div class="text-group_85 flex-col justify-between">
                <span class="text_17" @click="handleOpenVideoModal('已处置')">已处置</span>
                <span class="text_18">{{alarmStatistics.handled}}</span>
              </div>
            </div>
          </div>
          <div class="block_6 flex-col" >
            <div class="image-text_62 flex-row justify-between">
              <img
                class="label_6"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPng25aab30a344bcdd801241c9ec72aa1dc045fcccd1915dbb460ab3b1e25909f2b.png"
              />
              <span class="text-group_8">同区域多设备报警</span>
              <img
                class="image_22"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                style="width: 0.5rem;height: 0.7rem;margin-left: 4.2rem;"
                @click="jumpNotice('同区域多设备预警通知')"
              />
            </div>
            <div class="box_41 flex-row justify-between">
              <div class="box_6 flex-row justify-end">
                <div
                @click="toggleSelection('default')"
                :style="{ backgroundColor: isSelected == 'default' ? 'rgba(25, 224, 198, 0.2)' : 'rgba(25, 224, 198, 0.1)' }"
                style="padding-right: 0.2rem;"
                >
                  <span class="text_19" 
                  @click="showSelect = true; 
                  showDateRange = false;
                  "
                  style="margin-bottom: -0.2rem;"
                  >
                  默认
                  </span>
                  </div>
                  <div class="text-wrapper_5 flex-col"
                  @click="toggleSelection('custom')"
                  :style="{ backgroundColor: isSelected == 'custom' ? 'rgba(25, 224, 198, 0.2)' : 'rgba(25, 224, 198, 0.1)' }"
                  style="margin-left: 0;"
                  >
                      <span class="text_20" 
                      @click="showSelect = false; 
                      showDateRange = true;
                      "
                      >
                      自定义
                      </span>
                  </div>
              </div>
              <div class="box_7 flex-row">
                  <a-select 
                  v-if="showSelect"
                  size="small" 
                  placeholder="今日数据"
                  @change="handleSelectChange"
                  >
                      <a-select-option value="option1">全部</a-select-option>
                      <a-select-option value="option2">近7日</a-select-option>
                      <a-select-option value="option3">近15日</a-select-option>
                      <a-select-option value="option4">近3个月</a-select-option>
                      <a-select-option value="option5">近6个月</a-select-option>
                  </a-select>
                  <a-range-picker
                    v-if="showDateRange"
                    v-model="dateRange"
                    type="range"
                    :disabled-date="disabledDate"
                    format="YYYY-MM-DD"
                    :allowClear="true"
                    style="color: #fff; "
                    @change="handleDateRangeChange"
                  />
              </div>
           </div>
            <div class="text-wrapper_6 flex-row">
              <span class="text_23">企业名称</span>
              <span class="text_24">报警数量</span>
            </div>
            <div 
            v-for="(item, index) in sameAreaAlarmData" 
            :key="index" class="section_3 flex-row"
             @click="handleOpenSameAreaTableModal(item)"
            >
              <span class="text_25" 
              :title="item.enterprise_name"
              style="overflow: hidden; 
              text-overflow: ellipsis; 
              white-space: nowrap;
              height: 2rem;
              width: 12rem;
              ">
              {{ item.enterprise_name }}
              </span>
              <div class="block_7 flex-col"></div>
              <span class="text_26">{{ item.alarm_count }}</span>
            </div>
            <!-- <div class="section_4 flex-row">
              <div class="image-text_64 flex-row justify-between">
                <img
                  class="thumbnail_2"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPng32c8caeeb1975aacd785246cb94e8def19dfa4aba4e5dba18007987a6e90bd8a.png"
                />
                <span class="text-group_10">哈密至上物业服务有限责任公司</span>
              </div>
              <div class="section_5 flex-col"></div>
              <span class="text_27">2</span>
            </div> -->
          </div>
        </div>
        <div class="box_8 flex-col" >
          <span class="text_28">状态</span>
          <div class="image-text_65 flex-row justify-between">
            <img
              class="thumbnail_3"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngebc7d11bc48207d7fa475ab9b82b1d3e96152d798e03e16d09e7cec4d39e5047.png"
            />
            <span class="text-group_11">正常</span>
          </div>
          <div class="image-text_66 flex-row justify-between">
            <img
              class="thumbnail_4"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPng12de02ed5b096790d78325cc02f6d74d3f0a88a08f21d62370ed2a8c4f0dc861.png"
            />
            <span class="text-group_12">预警</span>
          </div>
          <div class="image-text_67 flex-row justify-between">
            <img
              class="thumbnail_5"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngffaebb859363d9973fc1e072b0fb4b93054e3c49c555a1cd7719ae0f601c5130.png"
            />
            <span class="text-group_13">维保</span>
          </div>
          <div class="image-text_68 flex-row justify-between">
            <img
              class="thumbnail_6"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPng2aa0fac0249e59f6e67f60f504b261c09eb540a64dfff7755613db2ce371f2fc.png"
            />
            <span class="text-group_14">隐患</span>
          </div>
          <div class="image-text_69 flex-row justify-between">
            <img
              class="thumbnail_7"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngb860dff157df9cb5358e90ee18f823b7e71faeb6c9b8e2a4bef6f47c74325991.png"
            />
            <span class="text-group_15">火情</span>
          </div>
        </div>
        <div class="group_34 flex-col justify-between" style="z-index: 100;">
          <div class="group_6 flex-col">
            <div class="box_42 flex-row justify-between" >
              <img
                class="label_7"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPng92e45e5546332daf3a3990dac2bc3998a389ca1bb0db01218af75ddf3999c81b.png"
              />
              <span class="text_29" @click="jumpFireAlarm">火情预警</span>
              <img
                    class="image_22"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                    style="width: 0.5rem;height: 0.7rem;margin-left: 6.5rem;"
                    @click="jumpNotice('设备火情预警')"
                  />
            </div>
            <div class="box_43 flex-row justify-between">
              <div class="image-text_70 flex-col justify-between">
                <div class="image-wrapper_5 flex-col">
                  <img
                    class="image_10"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPngc898ae6c6efa79bb4b0b51452967fccd2830a971c8d2f3fb65680a7a094791dd.png"
                  />
                </div>
                <div class="text-group_86 flex-col justify-between">
                  <span class="text_30" @click="handleOpenFireAlarmModal('全部')">火情预警</span>
                  <span class="text_31" style="margin-left: 0.3rem">{{equipmentWarningStatistics.todaytotalwarnings}}/{{equipmentWarningStatistics.totalwarnings}}</span>
                </div>
              </div>
              <div class="image-text_71 flex-col justify-between">
                <div class="image-wrapper_6 flex-col">
                  <img
                    class="image_11"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng8d306692552fbc2bc9dfa7f9b9b4a00bce7fcf4c3d790d166b2efb64d3679f8b.png"
                  />
                </div>
                <div class="text-group_87 flex-col justify-between">
                  <span class="text_32" @click="handleOpenFireAlarmModal('未完成')">未处置</span>
                  <span class="text_33" style="margin-left: 0.1rem">{{equipmentWarningStatistics.todayuncompletedwarnings}}/{{equipmentWarningStatistics.uncompletedwarnings }}</span>
                </div>
              </div>
              <div class="box_44 flex-col justify-between">
                <img
                  class="image_12"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPng16e0c09e762b3d0a0f7f813406422965ea825f19dd77ecb6199ce36ab4828a99.png"
                />
                <div class="text-group_88 flex-col justify-between">
                  <span class="text_34" @click="handleOpenFireAlarmModal('已完成')">已处置</span>
                  <span class="text_35" style="margin-left: 0.2rem">{{equipmentWarningStatistics.todaycompletedwarnings}}/{{equipmentWarningStatistics.completedwarnings}}</span>
                </div>
              </div>
            </div>
            <div class="box_12 flex-col"></div>
          </div>
          <div class="section_13 flex-col">
            <div class="group_35 flex-row" @click="jumpCollectionDevice">
              <div class="image-text_72 flex-row justify-between">
                <img
                  class="label_8"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPng8d8daf575e46d853e11214fad371e1b6ce5ae817a738f4e19b3a6be5473eb890.png"
                />
                <span class="text-group_19">物联网监测设备</span>
                <img
                    class="image_22"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                    style="width: 0.5rem;height: 0.7rem;margin-left: 4.9rem;"
                  />
              </div>
            </div>
            <div class="group_36 flex-row">
              <div class="image-text_73 flex-col justify-between">
                <img
                  class="image_13"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPng0b4b512a9d88b2b255bdfc8a7b8f2807218f50c348f01729ea10b4084653c522.png"
                />
                <div></div>
                <div class="text-group_89 flex-col justify-between">
                  <span class="text_36" @click="handleOpenCollectionDeviceModal('全部')">设备总数</span>
                  <span class="text_37" >{{collectingDeviceTotalStatistics.total_count}}</span>
                </div>
              </div>
              <!-- <span class="text_38" style="margin-left: -0.6rem;">个</span> -->
              <div class="image-text_74 flex-col justify-between">
                <img
                  class="image_14"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPngf82cfb5a16aad3d726528b01698e83c57271547c1b80ca2f60e86f2fec81a145.png"
                />
                <div class="text-group_90 flex-col justify-between">
                  <span class="text_39" @click="handleOpenCollectionDeviceModal('正常')">正常</span>
                  <span class="text_40" >{{collectingDeviceTotalStatistics.online_count}}</span>
                </div>
              </div>
              <!-- <span class="text_41" style="margin-left: -0.3rem;">个</span> -->
              <div class="image-text_75 flex-col justify-between">
                <img
                  class="image_15"
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPnge11991ff71606a4c6398549b857b87e71657caeb3a1c5ca430f1faf98f8b8c7e.png"
                />
                <div class="text-group_91 flex-col justify-between">
                  <span class="text_42"  @click="handleOpenCollectionDeviceModal('故障')">故障</span>
                  <span class="text_43" >{{collectingDeviceTotalStatistics.offline_count}}</span>
                </div>
              </div>
              <!-- <span class="text_44" style="margin-left: -0.5rem;">个</span> -->
              <div class="image-text_76 flex-col justify-between">
                <img
                  class="image_16"
                  style="margin-left: -0.4rem" 
                  referrerpolicy="no-referrer"
                  src="./assets/img/SketchPngf40baff901eb427dde165735bae20f7a374da3d9a6ed7e81a8c43843d1f9786c.png"
                />
                <div class="text-group_92 flex-col justify-between">
                  <span class="text_45" style="margin-left: -0.8rem"   @click="handleOpenCollectionDeviceModal('故障')">设备故障率</span>
                  <span class="text_46" style="margin-left: -0.7rem">{{collectingDeviceTotalStatistics.offline_rate}}</span>
                </div>
              </div>
              <!-- <span class="text_47">%</span> -->
            </div>
          </div>
          <div class="section_14 flex-col">
            <div class="image-text_77 flex-row justify-between" >
              <img
                class="label_9"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPng192069867dc6a242edbdbd763035de8beed5b311ad0a3a497399dc947f3349f1.png"
              />
              <span class="text-group_24" @click="jumpHiddenDanger">隐患处理</span>
              <img
                    class="image_22"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                    style="width: 0.5rem;height: 0.7rem;margin-left: 6.5rem;"
                     @click="jumpNotice('消防隐患工单超时通知')"
              />
            </div>
            <div class="group_10 flex-row"> 
              <a-range-picker
              v-model="dateRange2"
              type="range"
              format="YYYY-MM-DD"
              :allowClear="true"
              style="color: #fff;width: 12rem; "
              @change="handleDateRangeChange2"
              />
            </div>
            <div class="box_45 flex-row">
              <div class="group_12 flex-col">
                <div class="group_13 flex-row">
                  <div class="text-group_93 flex-col justify-between">
                    <span class="text_51" style="margin-left: -1rem;" @click="handleOpenHiddenDangerModal('全部')">隐患总数</span>
                    <span class="text_52" style="margin-left: -1rem;">{{hiddenDangerStatistics.in_hidden_danger }}/{{ hiddenDangerStatisticsTotal.in_hidden_danger}}</span>
                  </div>
                </div>
              </div>
              <div class="group_14 flex-col"></div>
              <div class="text-group_94 flex-col justify-between">
                <span class="text_53">{{hiddenDangerStatistics.completed_warnings }}</span>
                <span class="text_54"  @click="handleOpenHiddenDangerModal('已完成')">已处置</span>
              </div>
              <div class="text-group_95 flex-col justify-between">
                <span class="text_55">{{hiddenDangerStatistics.uncompleted_warnings }}</span>
                <span class="text_56"  @click="handleOpenHiddenDangerModal('未处置')">未处置</span>
              </div>
              <div class="text-group_96 flex-col justify-between">
                <span class="text_57">{{hiddenDangerStatistics.overdue_warnings }}</span>
                <span class="text_58"  @click="handleOpenHiddenDangerModal('已超期')">已超期</span>
              </div>
            </div>
          </div>
        </div>
        <div class="box_13 flex-col" style="z-index: 100;">
          <div class="group_37 flex-row" @click="jumpDevice">
            <img
              class="label_10"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngc82a3eaaaacc213a530367d6bf077a7cb34d8088352654812f1f50680c764c96.png"
            />
            <span class="text_59">消防设施设备</span>
            <img
              class="image_22"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
            />
          </div>
          <div class="image-wrapper_21 flex-row justify-between">
            <img
              class="image_17"
               @click="handleOpenModal('全部')"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngd416aae80cced350293c62edd3e10f190a5df2d00ae42c6207c2d652ef5b0a36.png"
            />
            <img
              class="image_18"
              @click="handleOpenModal('正常')"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngf82cfb5a16aad3d726528b01698e83c57271547c1b80ca2f60e86f2fec81a145.png"
            />
            <img
              class="image_19"
              @click="handleOpenModal('故障')"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPnge11991ff71606a4c6398549b857b87e71657caeb3a1c5ca430f1faf98f8b8c7e.png"
            />
            <img
              class="image_20"
              @click="handleOpenModal('故障')"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngf40baff901eb427dde165735bae20f7a374da3d9a6ed7e81a8c43843d1f9786c.png"
            />
          </div>
          <div class="text-wrapper_34 flex-row" style="z-index: 100;">
            <span class="text_60" @click="handleOpenModal('全部')">设备总数</span>
            <span class="text_61" @click="handleOpenModal('正常')">正常</span>
            <span class="text_62" @click="handleOpenModal('故障')">故障</span>
            <span class="text_63" @click="handleOpenModal('故障')">设备故障率</span>
          </div>
          <div class="text-wrapper_35 flex-row">
            <span class="text_64" style="font-size: 0.5rem;">{{deviceStatistics.total_count}}</span>
            <!-- <span class="text_65" style="margin-left:0.5rem;">个</span> -->
            <span class="text_66" style="font-size: 0.5rem;">{{deviceStatistics.online_count}}</span>
            <!-- <span class="text_67" style="margin-left:0.5rem;" >个</span> -->
            <span class="text_68" style="font-size: 0.5rem;margin-left: 1.7rem;">{{deviceStatistics.offline_count}}</span>
            <!-- <span class="text_69" style="margin-left:0.7rem;" >个</span> -->
            <span class="text_70"  style="font-size: 0.5rem;margin-left: 2rem;">{{deviceStatistics.online_rate}}</span>
            <!-- <span class="text_71">%</span> -->
          </div>
        </div>
        <div class="box_15 flex-col" style="z-index: 100;">
          <div class="section_18 flex-row justify-between" >
            <img
              class="label_11"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngc82c2de5df10d6dbde4c08152e49fec58fd0d069d95133d744673bf0924959c3.png"
            />
            <span class="text_72" @click="jumpMaintenance">维保监控</span>
            <img
                    class="image_22"
                    referrerpolicy="no-referrer"
                    src="./assets/img/SketchPng34bcc73578626c9e8cf09c1b04cd76db002ae20be6ef53dea11f0680204e16fc.png"
                    style="width: 0.5rem;height: 0.7rem;margin-left: 6.5rem;"
                     @click="jumpNotice('维保任务通知')"
                  />
          </div>
          <div class="section_19 flex-row">
            <div class="box_46 flex-col">
              <img
                class="image_21"
                referrerpolicy="no-referrer"
                src="./assets/img/SketchPngfbb2f1d7174f8dc82dd39d172a8eef32983adc0a72f8482c68578b2bb5864473.png"
              />
              <span class="text_73" @click="handleOpenMaintenanceModal('全部')">维保任务</span>
              <span class="text_74">{{ maintenanceStatistics.total}}</span>
            </div>
            <div class="section_7 flex-col"></div>
            <div class="text-wrapper_36 flex-col">
              <span class="text_75">{{ maintenanceStatistics.thisMonthCompleted }}</span>
              <span class="text_76" @click="handleOpenMaintenanceModal('本月已完成')">维保已完成</span>
              <span class="text_77">{{ maintenanceStatistics.LastMonthCompleted }}</span>
              <span class="text_78" @click="handleOpenMaintenanceModal('上月已完成')">上月已完成</span>
            </div>
            <div class="text-wrapper_37 flex-col">
              <span class="text_79">{{ maintenanceStatistics.thisMonthUncompleted}}</span>
              <span class="text_80" @click="handleOpenMaintenanceModal('本月未完成')">维保未完成</span>
              <span class="text_81">{{ maintenanceStatistics.LastMonthUncompleted}}</span>
              <span class="text_82" @click="handleOpenMaintenanceModal('上月未完成')">上月超期未完成</span>
            </div>
          </div>
        </div>
        <div class="text-wrapper_11 flex-col justify-end">
        <span class="text_83">安全企业</span>
        <span class="text_84">{{ statistics.secure_enterprise }}</span>
      </div>
      <div class="text-wrapper_12 flex-col justify-end">
        <span class="text_85">警务站</span>
        <span class="text_86">{{ statistics.police_station }}</span>
      </div>
      <div class="text-wrapper_13 flex-col justify-end">
        <span class="text_87">维保企业</span>
        <span class="text_88">{{ statistics.maintenance }}</span>
      </div>
      <div class="text-wrapper_14 flex-col justify-end">
        <span class="text_89">企业离线</span>
        <span class="text_90">{{ statistics.offlineTotal }}</span>
      </div>
      <div class="text-wrapper_15 flex-col justify-end">
        <span class="text_91">火情报警</span>
        <span class="text_92">{{statistics.todayFireAlarm}}/{{ statistics.fireAlarm }}</span>
      </div>
        <div class="text-wrapper_16 flex-col justify-end">
          <span class="text_93">多设备预警</span>
          <span class="text_94">{{statistics.todayEquipmentAlarm}}/{{statistics.EquipmentAlarm}}</span>
        </div>
      </div>
    </div>
  </div>
  <a-modal
    :visible="isModalVisible"
    @cancel="handleCancel"
    :footer="null"
    :width="1000"
    :style="{ height: 'auto', overflow: 'scroll'}"
    style="margin-top: 10%;margin-left: 20%;width:60% ;"
    destroyOnClose="true"
    :getContainer="getModalContainer"
  >
    <div  style="height: auto; overflow-y: auto;">
      <DeviceTable  :deviceType="deviceType"/>
    </div>
  </a-modal>
  <a-modal
    :visible="isMaintenanceModalVisible"
    @cancel="handleMaintenanceCancel"
    :footer="null"
    :width="1000"
    destroyOnClose="true"
    :style="{ height: 'auto', overflow: 'scroll' }"
    style="margin-top: 10%;margin-left: 20%;width:60% ;"
    :getContainer="getModalContainer"
  >
    <div style="height: auto; overflow-y: auto;">
      <MaintainceTable  :maintenanceType="maintenanceType"/>
    </div>
  </a-modal>
  <a-modal
    :visible="isFireAlarmModalVisible"
    @cancel="handleFireAlarmCancel"
    destroyOnClose="true"
    :footer="null"
    :width="1000"
    :style="{ height: 'auto', overflow: 'scroll' }"
    style="margin-top: 10%;margin-left: 20%;width:60% ;"
    :getContainer="getModalContainer"
  >
    <div style="height: auto; overflow-y: auto;">
      <FireAlarmTable :fireAlarmType="fireAlarmType"/>
    </div>
  </a-modal>
  <a-modal
      :visible="isCollectionDeviceModalVisible"
      @cancel="handleCollectionDeviceCancel"
      destroyOnClose="true"
      :footer="null"
      :width="1000"
      :style="{ height: 'auto', overflow: 'scroll' }"
      style="margin-top: 10%;margin-left: 20%;width:60% ;"
      :getContainer="getModalContainer"
    >
      <div style="height: auto; overflow-y: auto;">
        <CollectionDeviceTable :collectionDeviceType="collectionDeviceType"/>
      </div>
    </a-modal>
    <a-modal
    :visible="isVideoTableModalVisible"
    @cancel="handleVideoTableCancel"
    destroyOnClose="true"
    :footer="null"
    :width="1000"
    :style="{ height: 'auto', overflow: 'scroll' }"
    style="margin-top: 10%;margin-left: 20%;width:60% ;"
    :getContainer="getModalContainer"
  >
    <div style="height: auto; overflow-y: auto;">
      <VideoTable :videoTableDeviceType="videoTableDeviceType" />
    </div>
  </a-modal>
  <a-modal
      :visible="isInspectionModalVisible"
      @cancel="handleInspectionCancel"
      destroyOnClose="true"
      :footer="null"
      :width="1000"
      :style="{ height: 'auto', overflow: 'scroll' }"
      style="margin-top: 10%;margin-left: 20%;width:60% ;"
      :getContainer="getModalContainer"
    >
      <div style="height: auto; overflow-y: auto;">
        <InspectionTable :inspectionType="inspectionType"  :TimeType="isInspection" />
      </div>
    </a-modal>
    <a-modal
      :visible="isHiddenDangerModalVisible"
      @cancel="handleHiddenDangerCancel"
      destroyOnClose="true"
      :footer="null"
      :width="1000"
      :style="{ height: 'auto', overflow: 'scroll' }"
      style="margin-top: 10%;margin-left: 20%;width:60% ;"
      :getContainer="getModalContainer"
    >
      <div style="height: auto; overflow-y: auto;">
        <HiddenDangerTable 
        :hiddenDangerType="hiddenDangerType" 
        :StartTime="effectiveStartTime" 
        :EndTime="effectiveEndTime" 
        />
      </div>
    </a-modal>
    <a-modal
    :visible="isSameAreaTableModalVisible"
    destroyOnClose="true"
    @cancel="handleSameAreaTableCancel"
    :footer="null"
    :width="1000"
    :style="{ height: 'auto', overflow: 'scroll' }"
    style="margin-top: 10%;margin-left: 20%;width:60% ;"
    :getContainer="getModalContainer"
  >
    <div style="height: auto; overflow-y: auto;">
      <SameAreaTable  
      :selectedItem="selectedItem" 
      :startDate="SameAreaStartTime" 
      :endDate="SameAreaEndTime" 
      />
    </div>
  </a-modal>
  </div>
</template>
<script lang="ts" setup name="BigSrceenComponent">
import "/@/views/Echarts/jgBigscreen/assets/flexible/flexible.js"
import { ref, onMounted,watch,computed,onUnmounted  } from 'vue';
import  axios from 'axios';
import { 
    getOtherStatistics, 
    getEquipmentOnline, 
    MaintenanceMonthCompleted,
    getEquipmentWarning,
    getCollectingDeviceTotal,
    getAlarmStatistics,
    getInspectionStatistics ,
    SameAreaDiffDeviceAlarmTotal,
    getHiddenDangerTotal
  } from '/@/api/jgBigscreen/jgBigscreen';
import { 
    DatePicker,
    Select,
    Modal,
    Table,
    
  } from 'ant-design-vue';
import BaiduMap from '/@/views/Echarts/jgBigscreen/BaiduMap/baiduMap.vue';
import  DeviceTable  from '/@/views/Echarts/jgBigscreen/table/deviceTable.vue';
import  MaintainceTable  from '/@/views/Echarts/jgBigscreen/table/maintainceTable.vue';
import FireAlarmTable from '/@/views/Echarts/jgBigscreen/table/fireAlarmTable.vue';
import CollectionDeviceTable from '/@/views/Echarts/jgBigscreen/table/collectionDeviceTable.vue';
import VideoTable from '/@/views/Echarts/jgBigscreen/table/videoTable.vue';
import InspectionTable from '/@/views/Echarts/jgBigscreen/table/inspectionTable.vue';
import HiddenDangerTable from '/@/views/Echarts/jgBigscreen/table/hiddenDangerTable.vue';
import SameAreaTable from '/@/views/Echarts/jgBigscreen/table/sameAreaTable.vue';
import { useRouter } from 'vue-router'; // 引入路由钩子

 const router = useRouter();


  const showSelect = ref(true);
  const showDateRange = ref(false);
  const dateRange = ref([]);
  const isSelected = ref('default'); // 新增，记录当前选中的选项，默认选中“默认”
  const isInspection = ref("recent90"); 
  const HiddenStartTime = ref('');
  const HiddenEndTime = ref('');


  const toggleSelection = (type) => {
  isSelected.value = type; // 更新选中状态
  console.log('isSelected',type);
};

const inspectionSelection = (type) => {
  isInspection.value = type; // 更新选中状态
  console.log('isInspection',type);
};



//安全企业、警务站、维保企业、企业离线、火情报警、多设备预警接口数据
const statistics = ref({
police_station:0,  //警务站数量
EquipmentWarning:0,  //设备告警数量
maintenance:0, //维保企业数量
fireAlarm:0, //火情报警数量
secure_enterprise:0, //安全企业数量
offlineTotal:0, //离线企业总数
online_count:0, //在线设备数量
offline_count:0, //离线设备数量
total_count:0, //设备总数
online_rate:0, //故障率
EquipmentAlarm:0, //多设备预警数量
todayFireAlarm:0, //今日火情报警数量
todayEquipmentAlarm:0, //今日多设备预警数量

});

const fetchStatistics = async () => {
  try {
    const response = await getOtherStatistics();
    statistics.value = {
      police_station: response.police_station || 0,
      EquipmentWarning: response.EquipmentWarning || 0,
      maintenance: response.maintenance || 0,
      fireAlarm: response.fireAlarm || 0,
      secure_enterprise: response.secure_enterprise || 0,
      offlineTotal: response.offlineTotal || 0,
      EquipmentAlarm: response.EquipmentAlarm || 0,
      todayFireAlarm: response.todayFireAlarm || 0,
      todayEquipmentAlarm: response.todayEquipmentAlarm || 0
    };
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};


//设备在线离线数量

const deviceStatistics = ref({
  online_count: 0,
  online_rate: '0%',
  total_count: 0,
  offline_count: 0
});

const fetchDeviceStatistics = async () => {
  try {
    const response = await getEquipmentOnline();
    if (Array.isArray(response) && response.length > 0) {
      deviceStatistics.value = {
        online_count: response[0].online_count || 0,
        online_rate: response[0].online_rate || '0%',
        total_count: response[0].total_count || 0,
        offline_count: response[0].offline_count || 0
      };
      console.log(deviceStatistics.value);
    }
  } catch (error) {
    console.error('获取设备统计数据失败:', error);
  }
};

//本月上月维保任务完成情况

const maintenanceStatistics = ref({
  LastMonthCompleted:0, //上月已完成维保数量
  total:0, //维保总数
  thisMonthUncompleted:0, //本月未完成维保数量
  thisMonthCompleted:0, //本月已完成维保数量
  LastMonthUncompleted:0, //上月未完成维保数量
})

const fetchMaintenanceStatistics = async () => {
  try {
    const response = await MaintenanceMonthCompleted();
    maintenanceStatistics.value = {
      LastMonthCompleted: response.LastMonthCompleted || 0,
      total: response.total || 0,
      thisMonthUncompleted: response.thisMonthUncompleted || 0,
      thisMonthCompleted: response.thisMonthCompleted || 0,
      LastMonthUncompleted: response.LastMonthUncompleted || 0,
    };
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

//火情预警处置情况

const equipmentWarningStatistics = ref({
    totalwarnings: 0,
    todayuncompletedwarnings: 0,
    completedwarnings: 0,
    todaytotalwarnings: 0,
    uncompletedwarnings: 0,
    todaycompletedwarnings: 0
})

const fetchEquipmentWarningStatistics = async () => {
  try {
    const response = await getEquipmentWarning();
     equipmentWarningStatistics.value = {
      todayuncompletedwarnings: response[0].todayuncompletedwarnings || 0,
      totalwarnings: response[0].totalwarnings || 0,
      completedwarnings: response[0].completedwarnings || 0,
      todaytotalwarnings: response[0].todaytotalwarnings || 0,
      uncompletedwarnings: response[0].uncompletedwarnings || 0,
      todaycompletedwarnings: response[0].todaycompletedwarnings || 0,
    };
    //console.log(equipmentWarningStatistics.value);
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};

//物联网监测设备在线离线数量

const collectingDeviceTotalStatistics = ref({
  online_count: 0,
  offline_rate: 0,
  total_count: 0,
  offline_count: 0
});

const fetchCollectingDeviceStatistics = async () => {
  try {
    const response = await getCollectingDeviceTotal();
    if (Array.isArray(response) && response.length > 0) {
        collectingDeviceTotalStatistics.value = {
        online_count: response[0].online_count || 0,
        offline_rate: response[0].offline_rate || '0%',
        total_count: response[0].total_count || 0,
        offline_count: response[0].offline_count || 0
      };
      console.log(collectingDeviceTotalStatistics.value);
    }
  } catch (error) {
    console.error('获取设备统计数据失败:', error);
  }
};

//视频告警数

const alarmStatistics = ref({
  notDisposed:0, //视频告警未处置
  handled:0, //视频告警已处置
  alarmTotal:0, //总告警数
})

const fetchAlarmStatistics = async () => {
  try {
    const response = await getAlarmStatistics();
    alarmStatistics.value = {
      notDisposed: response.notDisposed || 0,
      // total: response.total || 0,
      handled: response.handled || 0,
      alarmTotal: response.alarmTotal || 0,
    };
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};
//巡检任务数据
const dailyInspectionData = ref({
  wait_completed_count: 0,
  uncompleted_count: 0,
  total_count: 0,
  completed_count: 0
});

const fetchGetInspectionStatistics = async () => {
  const params = {
    type: isInspection.value
  }
  console.log('params',params);
  try {
    const response = await getInspectionStatistics(params);
    dailyInspectionData.value = {
      wait_completed_count: response[0].wait_completed_count || 0,
      uncompleted_count: response[0].uncompleted_count || 0,
      total_count: response[0].total_count || 0,
      completed_count: response[0].completed_count || 0,
    };
  } catch (error) {
    console.error('获取统计数据失败:', error);
  }
};
//消防设施设备表格
const isModalVisible = ref(false);
const deviceType = ref('全部'); // 默认值

const handleOpenModal = (type) => {
  deviceType.value = type;
  isModalVisible.value = true;
  console.log('handleOpenModal', type);
};

const handleCancel = () => {
  isModalVisible.value = false;
};

//维保监控表格
const isMaintenanceModalVisible = ref(false);
const maintenanceType = ref('');

// 处理打开维保模态框的函数
const handleOpenMaintenanceModal = (type) => {
  maintenanceType.value = type;
  isMaintenanceModalVisible.value = true;
  console.log('handleOpenMaintenanceModal', type);
};

// 处理关闭维保模态框的函数
const handleMaintenanceCancel = () => {
  isMaintenanceModalVisible.value = false;
};

// 火情预警弹窗相
const isFireAlarmModalVisible = ref(false);
const fireAlarmType = ref('');

const handleOpenFireAlarmModal = (type) => {
  fireAlarmType.value = type;
  isFireAlarmModalVisible.value = true;
  console.log('handleOpenFireAlarmModal', type);
};

const handleFireAlarmCancel = () => {
  isFireAlarmModalVisible.value = false;
};

// 新增弹窗可见性和设备类型状态
const isCollectionDeviceModalVisible = ref(false);
const collectionDeviceType = ref('全部');

// 处理打开 CollectionDeviceTable 弹窗的函数
const handleOpenCollectionDeviceModal = (type) => {
  collectionDeviceType.value = type;
  isCollectionDeviceModalVisible.value = true;
  console.log('handleOpenCollectionDeviceModal', type);
};

// 处理关闭 CollectionDeviceTable 弹窗的函数
const handleCollectionDeviceCancel = () => {
  isCollectionDeviceModalVisible.value = false;
};

// 新增视频表格模态框可见性和设备类型状态
const isVideoTableModalVisible = ref(false);
const videoTableDeviceType = ref('全部');

// 处理打开视频表格模态框的函数
const handleOpenVideoModal = (type) => {
  videoTableDeviceType.value = type;
  isVideoTableModalVisible.value = true;
  console.log('handleOpenVideoModal', type);
};

// 处理关闭视频表格模态框的函数
const handleVideoTableCancel = () => {
  isVideoTableModalVisible.value = false;
};

// 新增巡检弹窗可见性和设备类型状态
const isInspectionModalVisible = ref(false);
const inspectionType = ref('全部');

// 处理打开巡检模态框的函数
const handleOpenInspectionModal = (type) => {
  inspectionType.value = type;
  console.log('inspectionType',inspectionType.value);
  isInspectionModalVisible.value = true;
  console.log('handleOpenInspectionModal', type);
};

// 处理关闭巡检模态框的函数
const handleInspectionCancel = () => {
  isInspectionModalVisible.value = false;
};
watch(isInspection, () => {
  fetchGetInspectionStatistics();
})


//同区域不同设备统计
// 处理日期范围选择变化
const StartDate = ref('');
const EndDate = ref('');
const handleDateRangeChange = async (dates) => {
  if (dates && dates.length === 2) {
    const startDate = dates[0].format('YYYY-MM-DD 00:00:00');
    const endDate = dates[1].format('YYYY-MM-DD 23:59:59');
    StartDate.value = startDate;
    EndDate.value = endDate;
    console.log('handleDateRangeChange', StartDate, EndDate);
    await fetchSameAreaAlarmData(startDate, endDate);
  }
};

// 获取同区域多设备报警数据
const sameAreaAlarmData = ref([]); // 新增，用于存储接口返回的数据
const fetchSameAreaAlarmData = async (startDate, endDate) => {
  try {
    const response = await SameAreaDiffDeviceAlarmTotal({ startDate, endDate });
    sameAreaAlarmData.value = response;

  } catch (error) {
    console.error('获取同区域多设备报警数据失败:', error);
  }
};

// 新增：处理选择事件
// 新增：处理选择事件
const handleSelectChange = async (value) => {
  let startDate, endDate;
  const now = new Date();
  
  // 设置结束日期为当天23:59:59
  const endOfDay = new Date(now);
  endOfDay.setHours(23, 59, 59, 999);
  endDate = formatDateTime(endOfDay);
  EndDate.value = endDate.split(' ')[0]; // 只显示日期部分

  switch (value) {
    case 'option1':
      // 全部
      const startOfAllTime = new Date(2000, 0, 1, 0, 0, 0);
      startDate = formatDateTime(startOfAllTime);
      StartDate.value = startDate.split(' ')[0];
      break;
    case 'option2':
      // 近7日
      const sevenDaysAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
      sevenDaysAgo.setHours(0, 0, 0, 0);
      startDate = formatDateTime(sevenDaysAgo);
      StartDate.value = startDate.split(' ')[0];
      break;
    case 'option3':
      // 近15日
      const fifteenDaysAgo = new Date(now.getTime() - 15 * 24 * 60 * 60 * 1000);
      fifteenDaysAgo.setHours(0, 0, 0, 0);
      startDate = formatDateTime(fifteenDaysAgo);
      StartDate.value = startDate.split(' ')[0];
      break;
    case 'option4':
      // 近3个月
      const threeMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 3, now.getDate(), 0, 0, 0);
      startDate = formatDateTime(threeMonthsAgo);
      StartDate.value = startDate.split(' ')[0];
      break;
    case 'option5':
      // 近6个月
      const sixMonthsAgo = new Date(now.getFullYear(), now.getMonth() - 6, now.getDate(), 0, 0, 0);
      startDate = formatDateTime(sixMonthsAgo);
      StartDate.value = startDate.split(' ')[0];
      break;
  }

  // 调用接口
  await fetchSameAreaAlarmData(startDate, endDate);
};

// 辅助函数：格式化日期时间为 YYYY-MM-DD HH:MM:SS
function formatDateTime(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}



//隐患处理日期选择
const dateRange2 = ref([]); // 新增：定义隐患处理时间范围
const StartTime= ref('');
const EndTime= ref('');
const handleDateRangeChange2 = (dates) => {
  if (dates && dates.length === 2) {
    const startTime = dates[0].format('YYYY-MM-DD 00:00:00');
    const endTime = dates[1].format('YYYY-MM-DD 23:59:59');
    StartTime.value = startTime;
    EndTime.value = endTime;
    // 调用接口获取隐患处理数据
    fetchHiddenDangerStatistics(startTime, endTime);
  }
};


const hiddenDangerStatistics = ref({
  completed_warnings: 0,
  in_hidden_danger: 0,
  uncompleted_warnings: 0,
  overdue_warnings: 0
});

const fetchHiddenDangerStatistics = async (startTime, endTime) => {
  try {
    const params = {
      startTime,
      endTime
    };
    const response = await getHiddenDangerTotal(params);
    hiddenDangerStatistics.value = {
      completed_warnings: response[0].completed_warnings || 0,
      in_hidden_danger: response[0].in_hidden_danger || 0,
      uncompleted_warnings: response[0].uncompleted_warnings || 0,
      overdue_warnings: response[0].overdue_warnings || 0
    };
  } catch (error) {
    console.error('获取隐患处理统计数据失败:', error);
  }
};

const  hiddenDangerStatisticsTotal = ref({})
const fetchHiddenDangerStatisticsTotal = async () => {
  try {
    const params = {
      startTime:"2001-01-01 00:00:00",
      endTime:"2099-12-31 23:59:59"
    };
    const response = await getHiddenDangerTotal(params);
    hiddenDangerStatisticsTotal.value = {
      completed_warnings: response[0].completed_warnings || 0,
      in_hidden_danger: response[0].in_hidden_danger || 0,
      uncompleted_warnings: response[0].uncompleted_warnings || 0,
      overdue_warnings: response[0].overdue_warnings || 0
    };
  } catch (error) {
    console.error('获取隐患处理统计数据失败:', error);
  }
};

//隐患处理弹窗
const isHiddenDangerModalVisible = ref(false);
// 新增记录隐患类型的变量
const hiddenDangerType = ref('');

// 新增打开隐患弹窗的处理函数
const handleOpenHiddenDangerModal = (type) => {
  hiddenDangerType.value = type;
  isHiddenDangerModalVisible.value = true;
};

// 新增关闭隐患弹窗的处理函数
const handleHiddenDangerCancel = () => {
  isHiddenDangerModalVisible.value = false;
};


//同区域不同设备弹窗
const isSameAreaTableModalVisible = ref(false);
const selectedItem = ref(null);

const handleOpenSameAreaTableModal = (item) => {
  selectedItem.value = item;
  isSameAreaTableModalVisible.value = true;
  console.log('handleOpenSameAreaTableModal', selectedItem.value);
};

const handleSameAreaTableCancel = () => {
  isSameAreaTableModalVisible.value = false;
  selectedItem.value = null;
};

// 定义 indexPage 的引用
const indexPageRef = ref(null);
// 定义 ResizeObserver 实例
let resizeObserver: ResizeObserver | null = null;

// 处理容器尺寸变化的函数
const handleResize = () => {
  if (indexPageRef.value) {
    const width = indexPageRef.value.offsetWidth;
    const height = indexPageRef.value.offsetHeight;
    // 在这里可以根据新的宽高进行相应的调整
    // 例如，重新设置字体大小、调整布局等
    // 以下是一个简单的示例，根据宽度调整字体大小
    const size = (width / 1920) * 37.5;
    document.documentElement.style.fontSize = size + 'px';
  }
};

onMounted(() => {
  if (indexPageRef.value) {
    // 创建 ResizeObserver 实例
    resizeObserver = new ResizeObserver(handleResize);
    // 开始监听 indexPage 容器的尺寸变化
    resizeObserver.observe(indexPageRef.value);
  }
});

onUnmounted(() => {
  if (resizeObserver) {
    // 组件卸载时停止监听
    resizeObserver.disconnect();
  }
});

const isFullScreen = ref(false);

// 切换全屏状态
const toggleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value;
};

onMounted(() => {
  fetchStatistics();
  fetchDeviceStatistics();
  fetchMaintenanceStatistics();
  fetchEquipmentWarningStatistics();
  fetchCollectingDeviceStatistics();
  fetchAlarmStatistics();
  fetchGetInspectionStatistics();
  fetchHiddenDangerStatisticsTotal();
});

onMounted(() => {
  // 获取当前日期
  const now = new Date();
  // 计算当天的开始时间（0 点 0 分 0 秒）
  const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
  // 计算当天的结束时间（23 点 59 分 59 秒）
  const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);
  console.log('endOfDay', endOfDay);
  // 自定义日期格式化函数
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

  // 将日期对象转换为 'YYYY-MM-DD HH:mm:ss' 格式的字符串
  const startDate = formatDate(startOfDay);
  const endDate = formatDate(endOfDay);
  console.log('startDate', startDate);
  console.log('endDate', endDate);

  // 调用获取隐患统计数据的函数
  fetchSameAreaAlarmData(startDate, endDate);
});

onMounted(() => {
  // 获取当前日期
  const now = new Date();
  // 计算当天的开始时间（0 点 0 分 0 秒）
  const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0);
  // 计算当天的结束时间（23 点 59 分 59 秒）
  const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59);

  // 自定义日期格式化函数
  const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

  // 将日期对象转换为 'YYYY-MM-DD HH:mm:ss' 格式的字符串
  const startTime = formatDate(startOfDay);
  const endTime = formatDate(endOfDay);
  HiddenStartTime.value = startTime;
  HiddenEndTime.value = endTime;

  console.log('startTime', startTime);
  console.log('endTime', endTime);

  // 调用获取隐患统计数据的函数
  fetchHiddenDangerStatistics(startTime, endTime);
});

// 计算属性，当 StartTime 为空时返回 HiddenStartTime
const effectiveStartTime = computed(() => {
  return StartTime.value || HiddenStartTime.value;
});
// 计算属性，当 StartTime 为空时返回 HiddenStartTime
const effectiveEndTime = computed(() => {
  return EndTime.value || HiddenEndTime.value;
});

// 计算属性，当 StartDate 为空时返回 HiddenStartTime
const SameAreaStartTime = computed(() => {
  return StartDate.value || HiddenStartTime.value;
});
// 计算属性，当 StartDate 为空时返回 HiddenStartTime
const SameAreaEndTime = computed(() => {
  return EndDate.value || HiddenEndTime.value;
});




// 新增函数，用于每 3 秒调用所有数据获取函数
const fetchAllData = () => {
  fetchStatistics();
  fetchDeviceStatistics();
  fetchMaintenanceStatistics();
  fetchEquipmentWarningStatistics();
  fetchCollectingDeviceStatistics();
  fetchAlarmStatistics();
  fetchGetInspectionStatistics();
  fetchHiddenDangerStatisticsTotal();
  // fetchHiddenDangerStatistics();
  // fetchSameAreaAlarmData();
};

const intervalId=ref(null);
onMounted(() => {
  // 初始加载数据
  fetchAllData();
  // 设置定时器，每 3 秒调用一次 fetchAllData 函数
   intervalId.value = setInterval(fetchAllData, 30000);
  // 组件卸载时清除定时器
  return () => clearInterval(intervalId);
});
// 监听日期范围变化，更新参数
watch(dateRange, () => {
  if (dateRange.value.length === 2) {
    HiddenStartTime.value = dateRange.value[0].format('YYYY-MM-DD');
    HiddenEndTime.value = dateRange.value[1].format('YYYY-MM-DD');
  }
});


//路由跳转
// 新增路由跳转方法
const navigateToNotificationList = () => {
  router.push({ path: '/management/inFireNotice/list' });
  ;
};
const jumpDevice = () => {
  router.push({ path: '/device/management/inDeviceManagement/list' });
  ;
};

const jumpInsepction = () => {
  router.push({ path: '/inspectionmanag/inTaskCollection/list' });
  ;
};

const jumpSafeAlarm = () => {
  router.push({ path: '/safealarm/safeAlarm/list' });
  ;
};
const jumpMaintenance = () => {
  router.push({ path: '/maintenance/management/maintenanceWorkTask/list' });
  ;
};

const jumpFireAlarm = () => {
  router.push({ path: '/management/inFireAlarmInfo/list' });
  ;
};

const jumpCollectionDevice = () => {
  router.push({ path: '/device/management/inMeasuringEquipment/list' });
  ;
};
const jumpHiddenDanger = () => {
  router.push({ path: '/inspectionmanag/inHiddenDanger/list' });
  ;
};
const jumpNotice = (ModuleName) => {
  console.log('ModuleName',ModuleName);
  router.push(
    { path: '/management/inFireNotice/list' ,query:{moduleName:ModuleName}}
  );
  ;
};
// 获取模态框的挂载节点
const getModalContainer = () => {
  return indexPageRef.value;
};


</script>


 <style scoped lang="less" >
 @import "/@/views/Echarts/jgBigscreen/assets/index.rem.less";
 @import "/@/assets/common.less";
.indexPage {
  /* 这里可以设置初始的宽度和高度 */
  width: auto;
  height: auto;
  /* 其他样式 */
}

/* 全屏样式 */
.full-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999; /* 确保在最上层 */
  background-color: white; /* 根据需要设置背景颜色 */
  overflow: auto; /* 当内容超出时显示滚动条 */
}
 ::v-deep(.ant-picker ){
  background-color: rgba(0,63,72,0.8);
 }
 ::v-deep(.ant-picker .ant-picker-input input){
  font-size: 12px;
  color: #fff;
 }
 ::v-deep(.ant-picker-separator .anticon-swap-right){
    color: #fff;
 }
 ::v-deep(.ant-picker-suffix .anticon-calendar){
  color:#fff;
 }
 .ant-select{
  width: 8rem;
}
::v-deep(.ant-select .ant-select-selector){
  background-color: rgba(0,63,72,0.8) !important;
  color: #fff !important;
 
}
::v-deep(.ant-select .ant-select-arrow) {
    color: white !important;
}
::v-deep(.ant-select-show-arrow .ant-select-selection-placeholder){
    color: #fff !important;
  }
::v-deep(.ant-modal .ant-modal-content){
  padding: 0 !important;
  // background: transparent !important;
}
    
 </style>
